<template>
  <div class="home-container">
    <h1 class="title">会议室预定系统</h1>
    <div class="role-select">
      <el-card class="role-card" @click="navigateTo('admin')">
        <el-icon :size="60"><User /></el-icon>
        <h2>管理员入口</h2>
        <p>点击进入后台管理系统</p>
      </el-card>
      
      <el-card class="role-card" @click="navigateTo('staff')">
        <el-icon :size="60"><Briefcase /></el-icon>
        <h2>员工入口</h2>
        <p>点击进入会议室预定系统</p>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { User, Briefcase } from '@element-plus/icons-vue'

const router = useRouter()

const navigateTo = (role) => {
  router.push(`/${role}-login`)
}
</script>

<style scoped>
.home-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem;
  background: #f0f2f5;
}

.title {
  color: #2c3e50;
  margin-bottom: 3rem;
}

.role-select {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.role-card {
  width: 300px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.role-card:hover {
  transform: translateY(-5px);
}
</style>